<template>
<div>
  <form class="card1">
    <input type="text" v-model="form.name">
    <br>
    <input type="text" v-model="form.age">
    <br>
    <button @click.prevent="submit">提交</button>
  </form>

  <div class="card1">
    <ul>
      <li  v-for="(item,index) in list.arr" :key="item+index">{{item}}</li>
    </ul>
    <button @click.prevent="add">添加</button>
  </div>

  <div class="card1">
    <button @click.prevent="watchReadonly">查看readonly值</button>
  </div>


  <div class="card1card1">
    reactive:{{form}}
    shallowReactive:{{testShallowReactive}}
    <br>
    <button @click.prevent="setShallowReactive">修改shallowReactive的值</button>
  </div>
</div>
</template>

<script setup lang="ts">
import {ref,reactive,readonly,shallowReactive} from "vue";

/**
 * ref:支持所有的类型  取值和赋值都需要.value
 * reactive:只支持引用数据类型 Array object Map Set weakSet weakMap ....  取值和赋值不需要.value   (深响应式对象)
 * readonly:只读属性
 * shallowReactive:(浅响应式对象)
 */
let form = reactive({
  name:'xiaoman',
  age:23
})
//对应方法1
// let list = reactive<string []>([
//
// ])
//对应方法2
let list = reactive<{arr:string[]}>({
  arr:[]
})

let testReadonly = reactive({
  name:'123'
})
const read = readonly(testReadonly)

let testShallowReactive:any = shallowReactive({
  foo:{
    bar:{
      num:1
    }
  }
})
const submit = () => {
  console.log(form)
}
const add =() => {
  //模拟接口返回数据
  setTimeout(() => {
    let res = ['EDG','RNG','JDG']
    //这种方法会破坏Proxy代理的响应式对象,导致页面不会渲染
    // list = res
    //方法1:使用数组的方法:push+解构
    // list.push(...res)
    //方法2:添加一个对象,把数组作为一个属性去解决
    list.arr = res
    console.log(list)
  })
}
const watchReadonly = () => {
  /**
   * testReadonly会影响read的值的变化
   */
  //只读,不让修改
  // read.name = '1'
  //read的值也会发生变化
  testReadonly.name = '1'
  console.log(testReadonly,read)
}
const setShallowReactive = () => {
  //浅层次的reactive,修改值的层次只能到foo
  // testShallowReactive.foo.bar.num = 1
  //只有这样才可以修改成功
  // testShallowReactive.foo = {
  //   bar: {
  //     num:12
  //   }
  // }
  form.name = '我要改啦'
  testShallowReactive.foo.bar.num = '我被影响啦'
  console.log(testShallowReactive)
}
</script>

<style scoped>
.card1{
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>